<template>
  <div class="app-main-container">
    <el-drawer
      ref="drawerRef"
      :title="$t('message.pk')"
      :visible.sync="isShowDrawer"
      :before-close="closeDrawer"
      size="920px"
    >
      <QueryForm
        v-model="filters"
        :query-form-config="queryFormConfig"
        @handleQuery="getList(1)"
        @clear="clearList"
      />
      <div class="doumee_table_header">
        <el-button type="primary" @click="showSchedule">{{ $t('message.pk') }}</el-button>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          :label="$t('message.kcmc')"
          min-width="200"
          prop="courseName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.sksj')"
          prop="classTime"
          min-width="230"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.skdd')"
          prop="site"
          show-overflow-tooltip
          min-width="200"
        />
        <el-table-column
          align="center"
          :label="$t('message.skls')"
          prop="teacherName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.zjls2')"
          prop="assistantName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.xyrs')"
          prop="studentNum"
          min-width="100"
        >
          <template slot-scope="scope">
            <span
              class="pointer primaryColor underline"
              @click="showStudents(scope.row)"
            >{{ scope.row.studentNum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.sjskrs')"
          prop="realNum"
          min-width="100"
        />
        <el-table-column
          align="center"
          :label="$t('message.kszt')"
          prop="status"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.status == "0" ?$t('message.dsk'): $t('message.ysk') }}
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('message.caozuo')"
          :width="$i18n.locale === 'ZH'? 200 : 340"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="flex-cc">
              <el-button
                v-if="scope.row.status == 0"
                type="text"
                @click="showSchedule(scope.row)"
              >{{ $t('message.edit') }}</el-button>
              <el-button
                v-if="scope.row.status == 0"
                type="text"
                @click="showStudent(scope.row)"
              >{{ $t('message.xygl') }}</el-button>
              <el-button
                v-if="scope.row.status == 0"
                type="text"
                class="secondColor"
                @click="updateStatus(scope.row)"
              >{{ $t('message.del') }}</el-button>
              <span v-if="scope.row.status == 1">-</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Paginations
        :total="total"
        :page="pagination.page"
        @current-change="getList"
        @SizeChange="handleSizeChange"
      />
    </el-drawer>
    <el-drawer
      :title="$t('message.xygl')"
      :visible.sync="showDetails"
      size="920px"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <div class="df mb10">
        <div class="mr20">{{ $t('message.kcmc') }}：{{ tempCourseRow.courseName }}</div>
        <div class="flex1">{{ $t('message.sksj') }}：{{ tempCourseRow.classTime }}</div>
      </div>
      <div class="df mb20">
        <div v-if="tempCourseRow.teacherName" class="mr20">{{ $t('message.jiaolian') }}：{{ tempCourseRow.teacherName }}</div>
        <div v-if="tempCourseRow.assistantName" class="mr20">{{ $t('message.zjjl') }}：{{ tempCourseRow.assistantName }}</div>
        <div class="flex1">{{ $t('message.skdd') }}：{{ tempCourseRow.site }}</div>
      </div>
      <div class="mb20">
        <span>{{ $t('message.xyxm') }}：</span>
        <el-input
          v-model="studentFilter.studentName"
          class="w200"
          :placeholder="$t('message.qsr') + $t('message.xyxm')"
        />
        <span class="ml30">{{ $t('message.memberInfo') }}：</span>
        <el-input
          v-model="studentFilter.memberInfo"
          class="w200"
          :placeholder="$t('message.hy2')"
        />
        <el-button
          type="primary"
          class="ml30"
          @click="refrshCourseTimeStudentList(1)"
        >{{ $t('message.cz') }}</el-button>
        <el-button class="ml10" @click="clearStudent">{{ $t('message.clear') }}</el-button>
      </div>
      <div
        class="dialog-header"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <el-button type="primary" @click="toStudentAdd()">{{ $t('message.tijia') }}</el-button>
        <div class="dialog-title">
          {{ $t('message.gon') }}{{ stuTotal }}{{ $t('message.mxy') }}，{{ kcStatus == "0" ? $t('message.dsk') : $t('message.quexie')
          }}{{ stuTotal - realNum }}{{ $t('message.mxy') }}
        </div>
      </div>
      <el-table
        :data="detail"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table margin-t-10"
      >
        <el-table-column align="center" :label="$t('message.xyxm')" prop="studentName" />
        <el-table-column
          align="center"
          min-width="250"
          :label="$t('message.memberInfo')"
          prop="phone"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.memberName }}</span>
            <span>-{{ scope.row.memberPhone }}</span>
            <span>-{{ scope.row.memberCard }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          min-width="80"
          :label="$t('message.skks')"
          prop="classNum"
        />
        <el-table-column
          align="center"
          min-width="80"
          :label="$t('message.syks')"
          prop="num"
        />
        <el-table-column
          align="center"
          min-width="80"
          :label="$t('message.skzt')"
          prop="status"
        >
          <template slot-scope="scope">
            {{
              scope.row.status == "0"
                ? $t('message.quexie')
                : scope.row.status == "2"
                  ? $t('message.dsk')
                  : $t('message.ysk')
            }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.caozuo')" width="80" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="flex-cc">
              <el-button
                type="text"
                class="secondColor"
                @click="deleteStu(scope.row.id)"
              >{{ $t('message.del') }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Paginations
        :total="stuTotal"
        :page="studentPagination.page"
        @current-change="refrshCourseTimeStudentList"
        @SizeChange="StuSizeChange"
      />
    </el-drawer>
    <el-dialog :title="$t('message.skxy')" :visible.sync="isShowStudents" width="800px">
      <div class="dialog-title">
        {{ $t('message.gon') }}{{ stuTotal }}{{ $t('message.mxy') }}，{{ kcStatus == "0" ? $t('message.dsk') : $t('message.quexie')
        }}{{ stuTotal - realNum }}{{ $t('message.mxy') }}
      </div>
      <el-table
        :data="detail"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table margin-t-10"
      >
        <el-table-column align="center" :label="$t('message.xyxm')" prop="studentName" />
        <el-table-column
          align="center"
          min-width="250"
          :label="$t('message.memberInfo')"
          prop="phone"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.memberName }}</span>
            <span>-{{ scope.row.memberPhone }}</span>
            <span>-{{ scope.row.memberCard }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          min-width="80"
          :label="$t('message.skks')"
          prop="classNum"
        />
        <el-table-column
          align="center"
          min-width="80"
          :label="$t('message.syks')"
          prop="num"
        />
        <el-table-column
          align="center"
          min-width="80"
          :label="$t('message.skzt')"
          prop="status"
        >
          <template slot-scope="scope">
            {{
              scope.row.status == "0"
                ? $t('message.quexie')
                : scope.row.status == "2"
                  ? $t('message.dsk')
                  : $t('message.ysk')
            }}
          </template>
        </el-table-column>
      </el-table>
      <Paginations
        :total="stuTotal"
        :page="studentPagination.page"
        @current-change="refrshCourseTimeStudentList"
        @SizeChange="StuSizeChange"
      />
    </el-dialog>
    <el-dialog
      :title="$t('message.xzxy')"
      :visible.sync="showAddStudent"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @closed="cancelAddStudent"
    >
      <el-table
        :data="tableData"
        border
        fit
        max-height="500"
        :header-row-class-name="'table-header'"
        class="doumee-element-table margin-t-10"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="rowCanSelect"
        />
        <el-table-column align="center" :label="$t('message.xymc')" prop="studentName" />
        <el-table-column align="center" :label="$t('message.sjh')" prop="phone" />
        <el-table-column align="center" :label="$t('message.yqdcs')" prop="num">
          <template slot-scope="scope">
            {{ scope.row.num ? scope.row.num : "0" }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="cancelAddStudent">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="confirmAddStudent"
        >{{ $t('message.qr') }}</el-button>
      </span>
    </el-dialog>
    <ScheduleCardAdd
      v-if="isShowScheduleCardAdd"
      ref="ScheduleCardAddRef"
      @close="isShowScheduleCardAdd = false"
      @success="getList(1)"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import store from '@/store'
import {
  courseTimeList,
  courseTimeStudentList,
  deleteCourseTime,
  courseStudentList,
  courseTimeAddStudent,
  courseTimeDelStudent
} from '@/api'
import QueryForm from '@/components/QueryForm'
import ScheduleCardAdd from '../scheduleCardAdd'
export default {
  components: {
    QueryForm,
    ScheduleCardAdd
  },
  data() {
    return {
      isShowDrawer: false,
      isShowStudents: false,
      isShowScheduleCardAdd: false,
      courseId: '',
      classId: '',
      site: '',
      teacherId: '',
      tempCourseRow: {},
      studentFilter: {},
      studentPagination: {
        rows: 10,
        page: 1
      },
      stuTotal: 0,

      queryFormConfig: {
        formItems: [{
          filed: 'classTime',
          type: 'date',
          label: this.$t('message.sksj'),
          clearable: true,
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
            }
          }
        }, {
          filed: 'status',
          type: 'select',
          label: this.$t('message.kczt'),
          clearable: true,
          options: [
            { value: '0', label: this.$t('message.dsk') },
            { value: '1', label: this.$t('message.ysk') }
          ]
        }],
        online: true
      },
      modalDialog: store.getters.dialog,
      meta: [],
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      kcStatus: '',
      total: 0,
      venueId: sessionStorage.getItem('venueId'),
      filters: {},
      listLoading: false,
      subLoading: false,
      detail: [{}],
      tableData: [],
      multipleSelection: [],
      showDetails: false,
      showAddStudent: false,
      timeId: '',
      studentNum: '',
      realNum: '',
      currentPage: 1,
      pageSize: 10
    }
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    showStudent(e) {
      this.tempCourseRow = { ...e }
      this.showDetails = true
      this.timeId = e.timeId
      this.kcStatus = e.status
      this.refrshCourseTimeStudentList()
      this.studentNum = e.studentNum
      this.realNum = e.realNum
    },
    showStudents(e) {
      this.tempCourseRow = { ...e }
      this.isShowStudents = true
      this.timeId = e.timeId
      this.kcStatus = e.status
      this.refrshCourseTimeStudentList()
      this.studentNum = e.studentNum
      this.realNum = e.realNum
    },
    showSchedule(row) {
      this.isShowScheduleCardAdd = true
      this.$nextTick(() => {
        this.$refs.ScheduleCardAddRef.isShowModal = true
        this.$refs.ScheduleCardAddRef.courseId = this.courseId
        this.$refs.ScheduleCardAddRef.classId = this.classId
        this.$refs.ScheduleCardAddRef.site = this.site
        if (this.teacherId) {
          this.$refs.ScheduleCardAddRef.teacherId = this.teacherId
        }
        this.$refs.ScheduleCardAddRef.getDetail()
        if (row && row.timeId) {
          this.$refs.ScheduleCardAddRef.timeId = row.timeId
          setTimeout(() => {
            this.$refs.ScheduleCardAddRef.getCourseTime()
          })
        }
      })
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.pagination = pagination
      this.listLoading = true
      courseTimeList({ pagination, param: { venueId, ...filters, classId: this.classId, courseId: this.courseId }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
          }
        }).catch(() => {
          this.listLoading = false
        })
    },
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    updateStatus(e) {
      const that = this
      this.$confirm(this.$t('message.sctc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          deleteCourseTime({ param: { timeId: e.timeId }})
            .then(res => {
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.delcg'))
                that.getList(1)
              }
            })
        })
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getStudentList() {
      const venueId = sessionStorage.getItem('venueId')
      courseStudentList({ param: { venueId, timeId: this.timeId, courseId: this.courseId }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.tableData = res.recordList || []
          }
        }).catch(() => {
          this.listLoading = false
        })
    },
    StuSizeChange(val) {
      this.studentPagination.rows = val
      this.refrshCourseTimeStudentList(1)
    },
    clearStudent() {
      this.studentFilter = {}
      this.refrshCourseTimeStudentList(1)
    },
    refrshCourseTimeStudentList(page) {
      if (page) {
        this.studentPagination.page = page
      }
      const { studentPagination, studentFilter } = this
      courseTimeStudentList({
        param: { timeId: this.timeId, ...studentFilter },
        pagination: studentPagination
      })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.detail = res.recordList
          this.stuTotal = res.totalCount
        })
    },
    rowCanSelect(row, index) {
      return !(row.selected === true)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 页面切换方法
    handleCurrentChange(val) {
      this.currentPage = val
    },
    deleteStu(id) {
      this.$confirm(this.$t('message.scxytc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          courseTimeDelStudent({ param: { id }})
            .then((res) => {
              if (res.errorCode !== '000000') return
              this.$message.success(this.$t('message.delcg'))
              this.refrshCourseTimeStudentList()
              this.getStudentList()
              this.getList(1)
            })
        })
        .catch(() => {
          // this.$message.info('已取消删除')
        })
    },
    toStudentAdd() {
      this.showAddStudent = true
      this.multipleSelection = []
      this.getStudentList()
    },
    cancelAddStudent() {
      this.showAddStudent = false
    },
    confirmAddStudent() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t('message.qxz') + this.$t('message.xueyuan'))
        return false
      }
      const studentList = []
      this.multipleSelection.forEach((e) => {
        studentList.push({ id: e.id, studentId: e.studentId })
      })
      this.subLoading = true
      courseTimeAddStudent({
        param: {
          studentList, timeId: this.timeId, courseId: this.courseId
        }
      })
        .then((res) => {
          this.subLoading = false
          if (res.errorCode === '000000') {
            this.showAddStudent = false
            this.$message({
              message: this.$t('message.tjcg2'),
              type: 'success'
            })
            this.refrshCourseTimeStudentList()
            this.getList()
          }
        }).catch(() => {
          this.subLoading = false
        })
    }

  }
}
</script>
<style lang="scss" scoped>
.dialog-title {
  margin-bottom: 12px;
  color: #333;
}
.studentNum {
  color: #435ebe;
  cursor: pointer;
}
</style>
